import { DeleteOutlined } from '@ant-design/icons';
import { Button, Input, List, message, Pagination, Popconfirm, Select } from 'antd';
import 'antd/dist/antd.css';
import moment from 'moment';
import queryString from 'query-string';
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import Home from '../common/home';
import http from '../common/http';

const { Search } = Input
const { Option } = Select

class NoteSearchListForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            loading: false,
            keyword: "",
            type: -1,
            types: [{ id: 1, name: "Type" }],
            data: {
                total: 0,
                pageSize: 10,
                dataList: [{ id: 0, title: "test", typeName: "Type", contentSingleLine: "##", createDate: 0 }]
            }
        }
    }

    componentDidMount() {
        var search = this.props.location.search
        let data = queryString.parse(search)
        var { keyword } = data || {}
        this.setState({ keyword }, () => {
            this.fetch()
        })
        this.fetchTypes()
    }

    fetch = (pageIndex = 0) => {
        this.setState({ loading: true })
        const type = this.state.type
        const keyword = this.state.keyword
        const pageSize = this.state.data.pageSize
        http.get("/api/note/note/search", { params: { keyword, type, pageIndex, pageSize } })
            .then(res => {
                var data = res.data
                this.setState({
                    loading: false,
                    data
                })
            })
    }

    delete = (id) => {
        http.delete("/api/note/note/delete/" + id)
            .then(res => {
                this.fetch()
            })
    }

    fetchTypes = () => {
        http.get("/api/note/type/find-all")
            .then(res => {
                let types = res.data
                this.setState({ types })
            })
    }

    pageOnChange = (pageIndex) => {
        this.fetch(pageIndex - 1)
    }

    handleSearch = (keyword) => {
        if (!keyword) {
            message.info("请输入关键字")
            return
        }
        this.setState({ keyword }, () => {
            this.fetch()
        })
    }

    handleSearchBySelect = (type) => {
        this.setState({ type }, () => {
            this.fetch()
        })
    }

    render() {
        const keyValue = this.state.keyword
        return (
            <div>
                <Home />

                <Select showSearch placeholder="请选择类型" style={{ width: 150, marginRight: 10 }}
                    onSelect={this.handleSearchBySelect}
                    filterOption={(input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }>
                    <Option key="-1"><b>= 全 部 =</b></Option>
                    {
                        this.state.types.map(type => {
                            return (<Option key={type.id}>{type.name}</Option>)
                        })
                    }
                </Select>
                <Search placeholder={"搜索：标题或内容" + (keyValue ? "，当前：" + keyValue : "")}
                    style={{ marginBottom: 10, width: 300 }}
                    enterButton onSearch={this.handleSearch} />

                <List bordered
                    loading={this.state.loading}
                    dataSource={this.state.data.dataList}
                    locale={{ emptyText: '暂无数据' }}
                    renderItem={item => (
                        <List.Item>
                            <Link to={{ pathname: '/note-edit', search: "sign=new&noteId=" + item.id }} target="_blank">
                                <b>【{item.typeName}】{item.title}</b> <br />
                                【{moment(item.createDate).format("YY-MM-DD")}】{item.contentSingleLine}
                            </Link>
                            <div style={{ position: 'absolute', right: 20, width: '200', padding: '10px 10px', textAlign: 'right' }}>
                                <Popconfirm title={`确认删除【${item.title}】?`} onConfirm={() => { this.delete(item.id) }}>
                                    <Button type="danger"> <DeleteOutlined /> 删除</Button>
                                </Popconfirm>
                            </div>
                        </List.Item>
                    )}
                />
                <Pagination onChange={this.pageOnChange} total={this.state.data.total} pageSize={this.state.data.pageSize} />
            </div>
        )
    }
}

// export default NoteSearchListForm
function WithNavigate(props) {
    let location = useLocation();
    return <NoteSearchListForm {...props} location={location} />
}
export default WithNavigate